<template>
    <section class="modlude">
        <!-- 导航栏 -->
        <p class="margintop"></p>
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="formSearch" class="gridContt">
                <el-form class="form_inline " :inline="true">
                    <!-- <el-form-item size="small" label="名称">
                        <el-input placeholder="请单位名称" v-model="formSearch.name" size='small'></el-input>
                    </el-form-item> -->
                    <el-button type="primary" size='small' v-if="$root.btnControl.find(item=>item=='view')"
                        @click="getlist">查 询</el-button>
                    <el-button type="primary" size='small' v-if="$root.btnControl.find(item=>item=='add')"
                        @click="adddialog = true">新 增</el-button>
                </el-form>
            </el-form>
        </el-col>

        <!-- 列表部分 -->
        <el-table :data="formData" highlight-current-row style="width: 100%;">
            <el-table-column prop="ipName" label="默认名称">
            <el-table-column prop="devName" label="映射名称">
            <el-table-column prop="devType" label="给予类型"></el-table-column>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width=400>
                <template slot-scope="scope">
                    <!-- <el-button type="warning" size="small" v-if="$root.btnControl.find(item=>item=='edit')"
                        @click=" Updatedanwei(scope.row)">修改</el-button> -->
                    <el-button type="danger" size="small" v-if="$root.btnControl.find(item=>item=='delete')"
                        @click="deletedanwei(scope.row.id)">删除</el-button>
                    <el-button size="small" v-if="$root.btnControl.find(item=>item=='view')"
                        @click="changeItem(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <paging @changePage="handleCurrentPage" :get-total='total'></paging>
        <!-- 批量删除，下标页码 -->
        <!-- <el-col :span="24" class="paginationt">
              <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :page-count="total" class="pagination">
              </el-pagination>
          </el-col> -->

        <!-- 添加列表 -->
        <el-dialog title="单位新增" class="duslogdiv" width="25%" :visible.sync="adddialog" :close-on-click-modal="false">
            <el-form label-width="110px" :model="formPush" ref="addunit">
                <el-form-item label="默认名称" prop="ipName" :rules="{
                required: true, message: '默认名称不能为空', trigger: 'blur'
                }">
                    <el-input v-model="formPush.ipName"></el-input>
                </el-form-item>
                <el-form-item label="映射名称" prop="devName" :rules="{
                    required: true, message: '映射名称不能为空', trigger: 'blur'
                }">
                    <el-input v-model="formPush.devName"></el-input>
                </el-form-item>
                <el-form-item label="给予类型" prop="name" :rules="{
                        required: true, message: '单位名称不能为空', trigger: 'blur'
                    }">
                    <el-input v-model="formPush.devType"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click.native="addList">提交</el-button>
            </div>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog title="单位修改" class="duslogdiv" width="25%" :visible.sync="updatadialog"
            :close-on-click-modal="false">
            <el-form label-width="110px" :model="updataForm" ref="addunit">
                <el-form-item label="默认名称" prop="ipName" :rules="{
                required: true, message: '默认名称不能为空', trigger: 'blur'
                }">
                    <el-input v-model="updataForm.ipName"></el-input>
                </el-form-item>
                <el-form-item label="映射名称" prop="devName" :rules="{
                    required: true, message: '映射名称不能为空', trigger: 'blur'
                }">
                    <el-input v-model="updataForm.devName"></el-input>
                </el-form-item>
                <el-form-item label="给予类型" prop="devType" :rules="{
                        required: true, message: '单位名称不能为空', trigger: 'blur'
                    }">
                    <el-input v-model="updataForm.devType"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click.native="updatalist">提交</el-button>
            </div>
        </el-dialog>

        <!-- 详情 -->
        <el-dialog title="详情" class="xiangqingdialog" width="25%" :visible.sync="xiangqingdialog"
            :close-on-click-modal="false" center>
            <el-row>
                <el-col :span="4">默认名称</el-col>
                <el-col :span="20">{{detailInfor.ipName}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4">映射名称</el-col>
                <el-col :span="20">{{detailInfor.devName}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="5">给予类型</el-col>
                <el-col :span="20">{{detailInfor.devType}}</el-col>
            </el-row>
            <!-- <el-row>
                <el-col :span="5">操作人姓名：</el-col>
                <el-col :span="20">{{detailInfor.updatorname}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4">创建时间：</el-col>
                <el-col :span="20">{{detailInfor.gmtCreate}}</el-col>
            </el-row> -->
            <!-- <el-row>
                <el-col :span="4">更新时间：</el-col>
                <el-col :span="20">{{detailInfor.gmtModified}}</el-col>
            </el-row> -->

            <div slot="footer" class="dialog-footer">
                <el-button @click.native="xiangqingdialog = false">取消</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
    import paging from "../paging"
    import { intrudeAddAddressIP, seleAddAddressIP, intrudedelAddressIP } from '../../url/api'
    export default {
        data() {
            return {
                formSearch: {//查询条件
                    pageNum: 1,
                    pageSize: 10
                },
                total: 0,//数据总数
                pages: 0,//页面总数
                adddialog: false,
                updatadialog: false,
                xiangqingdialog: false,
                detailInfor: {},
                //   addFormVisible:false,
                //   addFormVisible1:false,
                addForm: {},
                updataForm: {},
                formData: [],
                formPush: {},
            }
        },
        methods: {
            //详情
            changeItem(row) {
                this.xiangqingdialog = true
                this.detailInfor = row;

                //console.log("this.detailInfor", this.detailInfor);


            },

            //修改
            Updatedanwei(row) {
                this.updatadialog = true;
                //console.log(row);
                this.updataForm = {
                    id: row.id,
                    name: row.name
                }
            },
            deletedanwei(iem) {

                let a = iem
                //console.log("cccccccccc",a);  
                let params = {
                    id:a
                }
                if (iem) {
                    this.$confirm("确定要删除吗？", '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        intrudedelAddressIP(params).then((res) => {
                            //console.log("新增", res)
                            if (res.data.code == 200) {
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.getlist()
                            } else {
                                this.$message('删除失败')
                            }
                        })

                    }).catch(() => {

                    });

                }

            },


            //新增检查项
            addList() {//添加
                //console.log("this.formPush", this.formPush)
                this.$refs.addunit.validate((valid) => {
                    //console.log("valid", valid)
                    if (valid) {
                        this.$confirm("确定要新增吗？", '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.adddialog = false
                            //console.log(this.formPush)
                            intrudeAddAddressIP(this.formPush).then((res) => {
                                //console.log("新增", res)
                                if (res.data.code == 200) {
                                    this.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    });
                                    this.getlist()
                                } else {
                                    this.$message('添加失败')
                                }
                            })
                            this.adddialog = false

                        }).catch(() => {

                        });

                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleCurrentPage(val) {//页码改变
                this.formSearch.pageNum = val
                this.getlist()
            },
            updatalist() {
                //console.log("this.updataForm", this.updataForm)
                this.$refs.updataunit.validate((valid) => {
                    //console.log("valid", valid)
                    if (valid) {
                        this.$confirm("确定要修改吗？", '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.updatadialog = false
                            //console.log(this.updataForm)
                            storeGoodsUnitupdate(this.updataForm).then((res) => {
                                //console.log("修改", res)
                                if (res.data.code == 200) {
                                    this.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                    this.getlist()
                                } else {
                                    this.$message('修改失败')
                                }
                            })
                            this.updatadialog = false

                        }).catch(() => {

                        });

                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
                });

            },

            getlist() {
                seleAddAddressIP(this.formSearch).then((res) => {
                    //console.log(res);
                    //let arr = [];
                    if (res.data.code == 200) {
                        //console.log(res.data.data.records);
                        this.formData = res.data.data.records.filter((item) => {
                            //arr.push(item.id)
                            if (item.gmtCreate) {
                                item.gmtCreate = this.$root.getDateArray(item.gmtCreate)[9]
                            }
                            return item
                        })
                        //sessionStorage.setItem("xqIdList",arr)
                        this.total = res.data.data.total
                        //this.pages = res.data.pages
                    } else {
                        this.$message(res.data.msg);
                    }
                })

            },

            getInit() {//初始化列表
                this.getlist();
            },

        },
        mounted() {
            this.getInit();
        },
        components: {
            paging
        }
    }
</script>
<style scoped>
    .gridContt {
        line-height: 30px;
    }

    /* .formpush >>> */
</style>